<script lang="ts" setup>
import type { VbenFormProps } from '#/adapter/form';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';

import dayjs from 'dayjs';
import { Page } from '@vben/common-ui';
import { message } from 'ant-design-vue';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getComponentApi, handleMSDSdataApi } from '#/api';

interface RowType {
  msdsNo: string;
  chemNameCn: string;
  component: string;
  fillDate: string;
}

const formOptions: VbenFormProps = {
  // 控制表单是否显示折叠按钮
  showCollapseButton: true,
  // 默认展开
  collapsed: false,
  commonConfig: {
    colon: true,
    lableWidth: '120',
    componentProps: {
      class: 'w-full',
    }
  },
  fieldMappingTime: [['date', ['start', 'end']]],
  schema: [
    {
      component: 'ApiSelect',
      componentProps: {
        mode: 'multiple',
        placeholder: '请选择组成成分',
        allowClear: true,
        afterFetch: (data: { name: string; path: string }[]) => {
          return data.map((item: any) => ({
            label: item.name,
            value: item.name,
          }));
        },
        api: getComponentApi,
      },
      label: '组成成分', // $t('page.auth.forgetPassword'),
      fieldName: 'component',
      defaultValue: '',
    },
    {
      component: 'InputNumber',
      componentProps: {
        placeholder: '请输入MSDS编号',
      },
      fieldName: 'msdsNo',
      label: 'MSDS编号',
      renderComponentContent: () => ({
        prefix: () => 'WTC-',
      }),
    },
    {
      component: 'RangePicker',
      defaultValue: [dayjs().subtract(7, 'days'), dayjs()],
      fieldName: 'dateRange',
      label: '日期范围',
    },
  ],
  // 是否在字段值改变时提交表单
  submitOnChange: true,
  // 按下回车时是否提交表单
  submitOnEnter: false,
};

const gridOptions: VxeTableGridOptions<RowType> = {
  // checkboxConfig: {
  //   highlight: true,
  //   labelField: 'name',
  // },
  columns: [
    { fixed: 'left', type: 'checkbox', minWidth: 90, title: '全选' },
    { title: '序号', type: 'seq', width: 50 },
    { field: 'msdsNo', title: 'MSDS编号' },
    { field: 'chemNameCn', title: '化学品名称' },
    { field: 'component', title: '组成成分' },
    { field: 'fillDate', formatter: 'formatDate', title: '填报日期' },
    {
      fixed: 'right',
      width: 120,
      title: '操作',
      visible: true,
      slots: { edit: 'cellstool', default: 'cellstool' },
    },
  ],
  exportConfig: {},
  height: 'auto',
  keepSource: true,
  pagerConfig: {},
  proxyConfig: {
    ajax: {
      query: async ({ page }, formValues) => {
        message.success(`Query params: ${JSON.stringify(formValues)}`);
        return await handleMSDSdataApi({
          page: page.currentPage,
          pageSize: page.pageSize,
          ...formValues,
        });
      },
    },
  },
  toolbarConfig: {
    custom: true,
    export: true,
    refresh: true,
    resizable: true,
    search: true,
    zoom: true,
  },
};

const [Grid] = useVbenVxeGrid({
  formOptions,
  gridOptions,
});
</script>

<template>
  <Page auto-content-height>
    <Grid>
      <template #cellstool>
        <Button type="link">编辑</Button>
      </template>
    </Grid>
  </Page>
</template>
